<!DOCTYPE html>
<!-- saved from url=(0055)http://wbpreview.com/previews/WB043F013/navigation.html -->
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style=""><!--<![endif]-->
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Bianca Mobile Template - Navigation Page</title>
        <meta name="description" content="Bianca Mobile Template">
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
        <meta name="author" content="ariella - WrapBootstrap">
        <link rel="stylesheet" href="http://wbpreview.com/previews/WB043F013/stylesheets/bootstrap.css">
        <link rel="stylesheet" href="http://wbpreview.com/previews/WB043F013/stylesheets/icons.css">
        <link rel="stylesheet" href="http://wbpreview.com/previews/WB043F013/stylesheets/navigation-app.css">
        <script type="text/javascript" src="jquery-1.8.0.js"></script>
        <script type="text/javascript" src="modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <script type="text/javascript" src="bootstrap.js"></script>
        <script type="text/javascript" src="page-transitions.js"></script>
        <script type="text/javascript" src="application.js"></script>
    </head>
    <body style="">
      <nav id="header" class="navbar navbar-inverse navbar-fixed-top">
    <div class="row-fluid">
      <div class="span4 sidemenu-header"></div>
      <div class="navbar-inner span12">
        <div class="container">
          <div class="row-fluid">
            <div class="span1 button-column"> 
              <button type="button" class="side-menu-link nav-button" id="btn-header-nav">
                <i class="icon-menu"></i>
              </button>  
            </div>
            <div class="span8 header-title">
               <h4>Bianca Mobile</h4>
            </div>

          </div>
        </div>
      </div>                    
    </div>
    <div id="nav-bar" class="row-fluid black items-2">
    <ul>
      <li class="active">
        <a data-id="1" href="javascript:void(0)"><i class="icon-star"></i> <span>Dark Navbar</span></a>  
      </li> 
      <li>
        <a data-id="2" href="javascript:void(0)"><i class="icon-star-empty"></i> <span>Light Navbar</span></a>
      </li>
      <li class="hide">
        <a data-id="3" href="javascript:void(0)"><i class="icon-user"></i> <span>User</span></a>
      </li>
    </ul>
    </div></nav>
          <div id="main" class="container">
            <div class="row-fluid wrap"><aside id="side-menu" role="navigation" class="well span4 oc"><!--Sidebar content-->

      <ul class="nav nav-list">
        <li class="navigation page">
          <a data-trans="fade" href="navigation.htm"><i class="icon-layout"></i><i class="icon-right-open"></i> Navigation</a>
        </li>
        <li class="list page">
          <a data-trans="flip" href="http://wbpreview.com/previews/WB043F013/list.html"><i class="icon-list"></i><i class="icon-right-open"></i> List</a>
        </li>
        <li class="elements page">
          <a data-trans="sl" href="http://wbpreview.com/previews/WB043F013/elements.html"><i class="icon-info-circled"></i><i class="icon-right-open"></i> Elements</a>
        </li>
        <li class="settings">
          <a href="javascript:void(0)"><i class="icon-cog"></i><i class="icon-right-open"></i> Settings</a>
        </li>
        <li class="help">
          <a href="javascript:void(0)"><i class="icon-help"></i><i class="icon-right-open"></i> Help</a>
        </li> 
        <li class="logout">
          <a href="javascript:void(0);" id="btn-logout"><i class="icon-ccw"></i>Logout</a>
        </li>  
      </ul>
    </aside>
              <!--Body content-->
              <section class="well span12" id="body-container"><div class="navigation"><section id="navigation-section">
      <div class="page-header">
      <h1>Header</h1>    
      </div>

      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Markup</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              Header w/o Navbar
            </td>
            <td>
              <code>&lt;nav id="header" class="navbar navbar-inverse navbar-fixed-top"&gt;<br>
              &lt;div class="row-fluid"&gt;<br>
                &lt;div class="span4 sidemenu-header"&gt;&lt;/div&gt;<br>
                &lt;div class="navbar-inner span12"&gt;<br>
                  &lt;div class="container"&gt;<br>
                    &lt;div class="row-fluid"&gt;<br>
                      &lt;div class="span1 button-column"&gt; <br>
                        &lt;button type="button" class="side-menu-link nav-button" id="btn-header-nav"&gt;<br>
                          &lt;i class="icon-menu"&gt;&lt;/i&gt;<br>
                        &lt;/button&gt;  <br>
                      &lt;/div&gt;<br>
                      &lt;div class="span8 header-title"&gt;<br>
                         &lt;h4&gt;Bianca Mobile&lt;/h4&gt;<br>
                      &lt;/div&gt;<br>
                      <br>
                    &lt;/div&gt;<br>
                  &lt;/div&gt;<br>
                &lt;/div&gt;                    <br>
              &lt;/div&gt;<br>
               &lt;/nav&gt;  
              </code>
            </td>
          </tr>
          <tr>
            <td>
              Header with Navbar
            </td>
            <td>
              <code>&lt;nav id="header" class="navbar navbar-inverse navbar-fixed-top"&gt;<br>
              &lt;div class="row-fluid"&gt;<br>
                &lt;div class="span4 sidemenu-header"&gt;&lt;/div&gt;<br>
                &lt;div class="navbar-inner span12"&gt;<br>
                  &lt;div class="container"&gt;<br>
                    &lt;div class="row-fluid"&gt;<br>
                      &lt;div class="span1 button-column"&gt; <br>
                        &lt;button type="button" class="side-menu-link nav-button" id="btn-header-nav"&gt;<br>
                          &lt;i class="icon-menu"&gt;&lt;/i&gt;<br>
                        &lt;/button&gt;  <br>
                      &lt;/div&gt;<br>
                      &lt;div class="span8 header-title"&gt;<br>
                         &lt;h4&gt;Bianca Mobile&lt;/h4&gt;<br>
                      &lt;/div&gt;<br>
                      <br>
                    &lt;/div&gt;<br>
                  &lt;/div&gt;<br>
                &lt;/div&gt;                    <br>
              &lt;/div&gt;<br>
               &lt;div id="nav-bar" class="row-fluid black items-2"&gt;<br>
              &lt;ul&gt;<br>
                &lt;li class="active"&gt;<br>
                  &lt;a data-id="1" href="javascript:void(0)"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt; &lt;span&gt;Dark Navbar&lt;/span&gt;&lt;/a&gt;  <br>
                &lt;/li&gt; <br>
                &lt;li&gt;<br>
                  &lt;a data-id="2" href="javascript:void(0)"&gt;&lt;i class="icon-star-empty"&gt;&lt;/i&gt; &lt;span&gt;Light Navbar&lt;/span&gt;&lt;/a&gt;<br>
                &lt;/li&gt;<br>
                &lt;li class="hide"&gt;<br>
                  &lt;a data-id="3" href="javascript:void(0)"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt; &lt;span&gt;User&lt;/span&gt;&lt;/a&gt;<br>
                &lt;/li&gt;<br>
              &lt;/ul&gt;<br>
              &lt;/div&gt;&lt;/nav&gt;  
              </code>
            </td>
          </tr>
          <tr>
            <td>
              Header Title
            </td>
            <td>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="page-header">
      <h1>Navbar</h1>    
      </div>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Markup</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              Light Nav Bar
            </td>
            <td>
              <code>&lt;div id="nav-bar" class="row-fluid"&gt;&lt;ul&gt;...&lt;/ul&gt;&lt;/div&gt;  
              </code>
            </td>
          </tr>
          <tr>
            <td>
              Dark Nav Bar
            </td>
            <td>
              <code>&lt;div id="nav-bar" class="row-fluid black"&gt;&lt;ul&gt;...&lt;/ul&gt;&lt;/div&gt;  
              </code>
            </td>
          </tr>
          <tr>
            <td>
              Nav Button (Cloud Icon)
            </td>
            <td>
              <code>...&lt;li&gt;<br>
                            &lt;a href="javascript:void(0)"&gt;&lt;i data-icon="" class="icon"&gt;&lt;/i&gt; &lt;span&gt;Cloud&lt;/span&gt;&lt;/a&gt;  <br>
                          &lt;/li&gt;...  
              </code>
            </td>
          </tr>
          <tr>
            <td>
              Nav Button Selected (Cloud Icon)
            </td>
            <td>
              <code>...&lt;li class="active"&gt;<br>
                            &lt;a href="javascript:void(0)"&gt;&lt;i data-icon="" class="icon"&gt;&lt;/i&gt; &lt;span&gt;Cloud&lt;/span&gt;&lt;/a&gt;  <br>
                          &lt;/li&gt;...  
              </code>
            </td>
          </tr>
        </tbody>
      </table> 


      <div class="page-header">
      <h1>Footer</h1>    
      </div>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Markup</th>
          </tr>
        </thead>
        <tbody>
          <tr>
             <td>
               Footer
             </td>
             <td>
             </td>
          </tr>
          <tr>
            <td>
              Footer Item (Direction Icon)
            </td>
            <td>
            </td>
          </tr>
          <tr>
            <td>
              Footer Item Selected (More Icon)
            </td>
            <td>
            </td>
          </tr> 
        </tbody>
      </table>

      <div class="page-header">
      <h1>Sidebar</h1>    
      </div>
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Name</th>
            <th>Markup</th>
          </tr>
        </thead>
        <tbody>
          <tr>
             <td>
               Footer
             </td>
             <td>
             </td>
          </tr>
          <tr>
            <td>
              Sidebar Item (Layout Icon)
            </td>
            <td>
            </td>
          </tr> 
        </tbody>
      </table>

      <p>
          </p><div class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong>Info</strong> For more icons, checkout the <a href="http://wbpreview.com/previews/WB043F013/elements.html">Elements section</a>.
          </div>
      <p></p>  
    </section>
    </div></section>
            </div>
          </div>


          <footer id="footer" class="navbar navbar-inverse navbar-fixed-bottom">
          <div class="row-fluid">
            <div class="span4 footer-slider"></div>
            <div class="span8 footer-inner">
              <div class="container">
                <div class="row-fluid">
                  <ul>
                    <li data-id="1"><a href="javascript:void(0)"><i class="icon-direction"></i> Direction</a></li>  
                    <li data-id="2"><a href="javascript:void(0)"><i class="icon-comment"></i> Status</a></li>
                    <li class="active" data-id="3"><a href="javascript:void(0)"><i class="icon-location"></i> Location</a></li>
                    <li data-id="4"><a href="javascript:void(0)"><i class="icon-dot-3"></i> More</a></li>  
                  </ul>
                </div>                
              </div>
            </div> 
          </div>
          <div class="row-fluid">
            <div></div>
          </div>
          </footer>
    
    

</body></html>